<script setup>
import OImage from "../setting/Images.vue";
import Color from "../setting/Color.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Slider from "../setting/Slider.vue";
import PrizePopupSelect from "../setting/PrizePopupSelect.vue";
import { newRandomUid } from "@/utils";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  uid: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  group: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["update:config", "change"]),
  createPage = inject("createPage");

const activeName = ref(0),
  form = ref({
    $position: { left: 0, top: 0 },
    $removeable: false,
    statisticColor: "#FF921D",
    statisticBorderColor: "#e5e5e5",
    headerBgColor: "#ffffff",
    showHeaderBg: false,
    headerBgImg: "",
    headerBgSize: { width: 345, height: 150 },
    headerPosition: { left: 15, top: 15 },
    headerTextPosition: { left: 10, top: 10 },
    headerTextSize: { width: 325, height: 130 },
    headerRadius: 10,
    detailBgColor: "#ffffff",
    detailPosition: { top: 10, left: 15 },
    detailSize: { width: 345 },
    voteBtnImg: "./imagesStatic/activity/vote_btn.png",
    voteBtnSize: { width: 158, height: 47 },
    voteBtnPosition: { top: 600, left: 100 },
  });

const formRef = ref();

const rules = {
  winnerPopupUid: [
    { required: true, message: "请选择中奖弹窗", trigger: "change" },
  ],
  thanksPopupUid: [
    { required: true, message: "请选择未中奖弹窗", trigger: "change" },
  ],
};

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

// 表单校验
const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        // if (
        //   !winnerPopupList.value.find(
        //     (item) => item.uid === detail.value.winnerPopupUid
        //   )
        // ) {
        //   detail.value.winnerPopupUid = "";
        //   reject(`${props.name}未绑定中奖弹窗`);
        // }
        // if (
        //   !thanksPopupList.value.find(
        //     (item) => item.uid === detail.value.thanksPopupUid
        //   )
        // ) {
        //   detail.value.thanksPopupUid = "";
        //   reject(`${props.name}未绑定未中奖弹窗`);
        // }
        resolve();
      } else
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
    });
  });
};

const onChange = (val, type) => {
  detail.value = detail.value;
};

onMounted(() => {
  nextTick(() => {
    onChange();
  });
});

defineExpose({ check });
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    :rules="rules"
    :disabled="disabled"
    label-width="auto"
  >
    <PrizePopupSelect v-model="detail" :group="group" @change="onChange" />
    <AlphaColor
      v-model="detail.headerBgColor"
      name="信息栏背景色"
      @change="onChange"
    />
    <Color
      v-model="detail.statisticColor"
      name="统计数据颜色"
      @change="onChange"
    />
    <Color
      v-model="detail.statisticBorderColor"
      name="统计边框颜色"
      @change="onChange"
    />
    <AlphaColor
      v-model="detail.detailBgColor"
      name="详情背景色"
      @change="onChange"
    />
    <Slider
      v-model="detail.headerRadius"
      name="信息栏圆角"
      :max="20"
      @change="onChange"
    />
    <OImage
      v-model="detail.headerBgImg"
      v-model:size="detail.headerBgSize"
      v-model:show="detail.showHeaderBg"
      name="信息栏背景图"
      @change="onChange"
    />
    <OImage
      v-model="detail.voteBtnImg"
      v-model:size="detail.voteBtnSize"
      name="投票按钮"
      @change="onChange"
    />
  </el-form>
</template>
